<template>
  <div class="business-order-container">
    <top-tip :tipcontent="tipcontent" />
    <vab-query-form>
      <vab-query-form-left-panel :span="24">
        <el-form :inline="true" :model="queryForm" @submit.prevent>
          <el-space wrap :size="size">
            <el-form-item class="form-item">
              <el-cascader
                v-model="queryForm.cityArea"
                :options="cityOptions"
                :props="citySelect"
                placeholder="选择地区"
                collapse-tags
                clearable
              />
            </el-form-item>
            <el-form-item class="form-item">
              <el-cascader
                v-model="queryForm.industry"
                :options="industryOptions"
                :props="industrySelect"
                placeholder="选择行业"
                collapse-tags
                clearable
              />
            </el-form-item>

            <el-form-item>
              <el-input
                v-model.trim="queryForm.pickStaff"
                clearable
                placeholder="请输签约人"
              />
            </el-form-item>
            <el-form-item>
              <el-input
                v-model.trim="queryForm.orderCode"
                clearable
                placeholder="请输合同编号"
              />
            </el-form-item>
            <el-form-item>
              <el-select
                v-model="queryForm.searchOrderFlow"
                style="width: 200px"
              >
                <el-option label="请选择日期流程" :value="0" />
                <el-option label="已签约待录入" :value="1" />
                <el-option label="已到单录入" :value="2" />
                <el-option label="已确认收款" :value="3" />
                <el-option label="已提单" :value="4" />
                <el-option label="已审核分单" :value="5" />
              </el-select>
            </el-form-item>
            <el-form-item>
              <!-- <el-date-picker
                v-model="queryForm.orderDate"
                type="date"
                placeholder="请选择日期"
              /> -->
              <!-- 选择时间组件 -->
              <DateSelect ref="DateSelectRef" @get-date="getDate" />
            </el-form-item>
            <el-form-item>
              <el-button :icon="Search" type="primary" @click="queryData">
                查询
              </el-button>
            </el-form-item>
          </el-space>
        </el-form>
      </vab-query-form-left-panel>
      <!-- <vab-query-form-right-panel :span="6">
        <el-button :icon="Plus" type="primary" @click="createOrder">
          新增业务单
        </el-button>
      </vab-query-form-right-panel> -->
    </vab-query-form>

    <div style="margin-top: 10px">
      <el-table
        v-loading="listLoading"
        :data="list"
        @selection-change="setSelectRows"
      >
        <!-- <el-table-column align="center" show-overflow-tooltip type="selection" /> -->
        <el-table-column
          align="center"
          label="业务单ID"
          prop="OrderID"
          show-overflow-tooltip
          width="80"
        />
        <el-table-column
          align="center"
          label="客户名称"
          prop="CustomerAllName"
          show-overflow-tooltip
          width="200"
        />
        <el-table-column
          align="center"
          label="跟进签约人"
          prop="SaleStaffName"
          show-overflow-tooltip
        />
        <el-table-column
          align="center"
          label="商机业务类型"
          prop="BusinessOrderName"
          show-overflow-tooltip
        />
        <el-table-column label="流程跟进" width="300">
          <template #default="{ row }">
            <div v-for="(item, index) in row.OrderFlow" :key="index">
              {{ item.addTime }}：{{ item.OrderFlowName }}
            </div>
          </template>
        </el-table-column>
        <el-table-column align="center" label="查看详情" width="200">
          <template #default="{ row }">
            <el-button text @click="showOrder(row)">查看详情</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        background
        :current-page="queryForm.pageNo"
        :layout="layout"
        :page-size="queryForm.pageSize"
        :total="total"
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
      />
    </div>
    <edit ref="editRef" @fetch-data="fetchData" />
  </div>
</template>

<script>
  import DateSelect from '/src/components/DateSelect.vue'
  import { CitySelect, IndustrySelect } from '@/api/common'
  import { getBusinessList } from '@/api/businessOrder'
  import Edit from './components/BusinessOrderEdit'
  import { Delete, Plus, Search } from '@element-plus/icons-vue'

  export default defineComponent({
    name: 'BusinessOrder',
    components: { Edit, DateSelect },
    setup() {
      const route = useRoute()
      const router = useRouter()
      const $baseConfirm = inject('$baseConfirm')
      const $baseMessage = inject('$baseMessage')

      const state = reactive({
        tipcontent: {
          title: '关于确认收款',
          memo:
            '本页用于出纳人员确认合同业务单收款；默认显示新提单未确认收款的合同业务单；<br>' +
            '点开需要审核确认收款的业务合同单，即可查看此业务合同的具体详情，同时可以看到相关款项信息；<br>' +
            '点击确认收款，填写相关收款信息，提交确认，并通知到相关人员。',
        },
        editRef: null,
        DateSelectRef: null,
        cityOptions: [],
        industryOptions: [],
        citySelect: { checkStrictly: true, multiple: true },
        industrySelect: { checkStrictly: true, multiple: true },
        list: [],
        listLoading: true,
        layout: 'total, sizes, prev, pager, next, jumper',
        total: 0,
        selectRows: '',
        queryForm: {
          dataType: 'all',
          tab: '',
          customerid: 0,
          orderflowstate: 100,
          pageNo: 1,
          pageSize: 10,
          cityArea: {},
          industry: {},
          orderCode: '',
          pickStaff: '',
          searchOrderFlow: 0,
          orderDate: '',
        },
      })

      const createOrder = () => {
        router.push({
          path: 'createOrder',
          query: { customerid: state.queryForm.customerid },
        })
      }

      const setSelectRows = (val) => {
        state.selectRows = val
      }
      const handleEdit = (row) => {
        if (row.id) {
          state.editRef.showEdit(row)
        } else {
          state.editRef.showEdit()
        }
      }
      const handleDelete = (row) => {
        if (row.id) {
          $baseConfirm('你确定要删除当前项吗', null, async () => {
            const { msg } = await doDelete({ ids: row.id })
            $baseMessage(msg, 'success', 'vab-hey-message-success')
            await fetchData()
          })
        } else {
          if (state.selectRows.length > 0) {
            const ids = state.selectRows.map((item) => item.id).join()
            $baseConfirm('你确定要删除选中项吗', null, async () => {
              const { msg } = await doDelete({ ids })
              $baseMessage(msg, 'success', 'vab-hey-message-success')
              await fetchData()
            })
          } else {
            $baseMessage('未选中任何行', 'error', 'vab-hey-message-error')
          }
        }
      }
      const handleSizeChange = (val) => {
        state.queryForm.pageSize = val
        fetchData()
      }
      const showOrder = (row) => {
        router.push({
          path: '/business/order/allOrderDetails',
          query: { orderid: row.OrderID },
        })
      }
      const handleCurrentChange = (val) => {
        state.queryForm.pageNo = val
        fetchData()
      }
      const queryData = () => {
        state.queryForm.pageNo = 1
        fetchData()
      }
      const fetchData = async () => {
        state.listLoading = true
        const {
          data: { list, total },
        } = await getBusinessList(state.queryForm)
        state.list = list
        state.total = total
        state.listLoading = false
      }
      onMounted(() => {
        console.log('route.query.customerid', route.query.customerid)

        if (route.query.customerid) {
          state.queryForm.customerid = route.query.customerid
        }
        fetchData()
      })

      const getCitySelect = async () => {
        const {
          data: { cityOptions },
        } = await CitySelect()
        state.cityOptions = cityOptions
        console.log('列表1', cityOptions)
      }
      const getIndustrySelect = async () => {
        const {
          data: { industryOptions },
        } = await IndustrySelect()
        state.industryOptions = industryOptions
        console.log('列表2', industryOptions)
      }
      const getDate = (data) => {
        state.queryForm.orderDate = data
        console.log(data, '子组件传过来的时间数组')
      }

      onMounted(() => {
        getCitySelect()
        getIndustrySelect()
      })

      return {
        ...toRefs(state),
        createOrder,
        setSelectRows,
        handleEdit,
        getDate,
        getCitySelect,
        getIndustrySelect,

        showOrder,
        handleDelete,
        handleSizeChange,
        handleCurrentChange,
        queryData,
        fetchData,
        Delete,
        Plus,
        Search,
      }
    },
  })
</script>
